import { Button, Image, Tag } from 'react-vant';
import './index.css';
import { getGoodsImagePath } from '@/utils/common';

type GoodCardProps = {
  data: ResponseGoodsDto;
  onOperate?: (id: number, isShelve: number) => void;
  onClick?: () => void;
};

const GoodCard: React.FC<GoodCardProps> = ({
  data,
  onOperate = (id: number, isShelve: number) => {},
  onClick = () => {},
}) => {
  return (
    <div className="good-card-container" onClick={onClick}>
      <div className="good-card-img">
        <Image height={'100%'} width={'100%'} src={getGoodsImagePath(data.id, data.photo)} />
      </div>
      <div className="good-card-info">
        <div className="good-card-info-name">{data.name}</div>
        <div className="good-card-info-name">库存:{data.inventory}</div>
        <div className="good-card-info-name">
          价格:
          {
            <>
              <span
                style={
                  data.promotePrice
                    ? { textDecorationLine: 'line-through', color: 'gray', fontSize: '12px' }
                    : { color: 'red' }
                }
              >
                {data.price.toFixed(2)}
              </span>
              <span style={{ color: 'red' }}>
                {data.promotePrice ? data.promotePrice.toFixed(2) : ''}
              </span>
            </>
          }
        </div>
      </div>
      <div className="good-card-right">
        <div className="good-card-btn">
          <Button
            type="primary"
            size="small"
            onClick={(e) => {
              e.stopPropagation();
              onOperate(data.id, data.isShelve);
            }}
          >
            操作
          </Button>
        </div>
      </div>
      <div className="good-card-status">
        <>
          {
            <Tag type="danger" style={{ marginRight: '10px' }}>
              Top:{data.topLevel}
            </Tag>
          }
        </>
        <>{data.isShelve === 1 ? <Tag type="success">已上架</Tag> : <Tag>未上架</Tag>}</>
      </div>
    </div>
  );
};

export default GoodCard;
